<template>
  <div class="cat-name-title" :class="theme">
    <h1 :style="{'font-size':titleFontSize}">{{catName}}</h1>
    <p>{{year}}年度&nbsp;·&nbsp;十大品牌榜单</p>
  </div>
</template>

<script>
export default {
  props: {
    catName: {
      type: String,
      default: ' '
    },
    year: {
      type: [Number, String],
      default: 2019
    },
    theme: {
      type: String,
      default: 'yellow' // yellow brown
    }
  },
  computed: {
    titleFontSize() {
      let fz = 56
      if (this.catName.length < 9) {
        fz = 56
      } else if (this.catName.length < 12) {
        fz = this.catName.length * -4 + 92
      } else {
        fz = 39
      }
      return fz / 100 + 'rem'
    }
  }
}
</script>

<style scoped lang="scss">
.cat-name-title {
  width: 6.5rem;
  height: 1.7rem;
  background: center no-repeat;
  background-size: contain;
  margin: auto;
  text-align: center;

  h1 {
    font-size: 0.56rem;
    line-height: 0.56rem;
    min-height: 0.56rem;
  }
  p {
    width: 4.7rem;
    height: 0.64rem;
    font-size: 0.34rem;
    font-weight: bold;
    line-height: 0.62rem;
    border: 2px solid #f7cc3d;
    border-radius: 0.32rem;
    margin: 0.24rem auto 0 auto;
  }
  &.yellow {
    background-image: url(../assets/img/yellow-name-box.png);
    color: #f7cc3d;
    p {
      border-color: #f7cc3d;
    }
  }
  &.brown {
    background-image: url(../assets/img/brown-name-box.png);
    color: #643e0d;
    p {
      border-color: #643e0d;
    }
  }
}
</style>
